<template>
  <li :class="classes" @click.stop="handleClickItem">
    <div :class="divClasses" >
      <slot></slot>
      <slot name="title"></slot>
    </div>
  </li>
</template>

<script>
import mixinsLink from '../../../mixins/link'
import { findComponentUpward } from '../../../utils/assist'
import Emitter from '../../../mixins/emitter'
import mixin from './MenuAssistant'

export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'MenuItem',
  mixins: [Emitter, mixin, mixinsLink],
  components: {},
  props: {
    name: {
      type: [String, Number],
      required: true
    },
    route: [String, Object],
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // 这里存放数据
    return {
      active: false
    }
  },
  // 监听属性 类似于data概念
  computed: {
    classes () {
      return [
        {
          [`${'sh-menu'}-item`]: this.isShowMenuActive,
          [`${'sh-menu'}-item-active`]: this.active && this.isShowMenuActive,
          [`${'sh-menu'}-item-selected`]: this.active && this.isShowMenuActive,
          [`${'sh-menu'}-item-disabled`]: this.disabled,
          [`${'sh-menu'}-popup-item`]: !this.isShowMenuActive,
          [`${'sh-menu'}-popup-item-active`]:
            this.active && !this.isShowMenuActive,
          [`${'sh-menu'}-popup-item-selected`]:
            this.active && !this.isShowMenuActive
        }
      ]
    },
    divClasses () {
      return [
        {
          [`${'sh-menu'}-item-div`]: !this.isCollape,
          [`${'sh-menu'}-item-div-active`]: !this.isCollape && this.active,
          [`${'sh-menu'}-item-first`]: !this.isCollape && this.isShowVerMenu,
          [`${'sh-menu'}-item-second`]: !this.isCollape && !this.isShowVerMenu
        }
      ]
    },
    itemStyle () {
      // return this
      return this.hasParentSubmenu && this.mode !== 'hor'
        ? {
          paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
        }
        : {}
    },
    isShowVerMenu () {
      let isFirstLevel = true
      let parent = findComponentUpward(this, 'Submenu')
      let parentGroup = findComponentUpward(this, 'MenuGroup ')
      let parentMenu = findComponentUpward(this, 'Menu')
      if (parent && parentMenu) {
        isFirstLevel = false
      } else if (parentGroup && parentMenu) {
        isFirstLevel = false
      } else {
        isFirstLevel = true
      }
      return isFirstLevel
    },
    isShowMenuActive () {
      // 显示哪种方式的item，从大的情况看有四种，首先在垂直模式下有叶子节点和一级节点
      // 在水平模式下，有两种也是一级节点和非一级节点，非一级节点可以在垂直的缩小
      let isFirstLevel = true
      // 禁止submenu上面套group,或者上面套menu
      let parent = findComponentUpward(this, 'Submenu')
      let parentGroup = findComponentUpward(this, 'MenuGroup ')
      let parentMenu = findComponentUpward(this, 'Menu')
      if (parent && parentMenu) {
        isFirstLevel = false
      } else if (parentGroup && parentMenu) {
        isFirstLevel = false
      } else {
        isFirstLevel = true
      }

      if (isFirstLevel) {
        return true
      } else if (!isFirstLevel && !this.isMenuPopup) {
        return true
      } else {
        return false
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleClickItem (event, newWindow = false) {
      if (this.disabled) return
      if (newWindow || this.target === '_blank') {
        // 如果是 new_window，直接新开窗口就行，无需发送状态
        // this.handleCheckClick(event, newWindow);
        let parentMenu = findComponentUpward(this, 'Menu')
        if (parentMenu) parentMenu.handleEmitSelectEvent(this.name)
      } else {
        let parent = findComponentUpward(this, 'Submenu')
        if (parent) {
          this.dispatch('Submenu', 'on-menu-item-select', this.name)
        } else {
          this.dispatch('Menu', 'on-menu-item-select', this.name)
        }
      }
      this.dispatch('Menu', 'on-menu-item-click', this)
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.menu.addItem(this)
    this.$on('on-update-active-name', name => {
      if (this.name === name) {
        this.active = true
      } else {
        this.active = false
      }
    })
  },
  beforeDestroy () {
    this.menu.removeItem(this)
  }
}
</script>
